<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增试卷')"/>
    <th:block th:include="include :: jquery-steps-css"/>
    <style>
        .content {
            height: 550px;
            background: #ffffff;
            display: block;
            margin: 5px 5px 10px 5px;
            min-height: 350px;
            max-height: 550px;
            position: relative;
            width: auto;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            overflow: auto;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-paper-add">
        <h1>基本信息</h1>
        <section>
            <div class="form-group">
                <label class="col-sm-3 control-label">试卷名称：</label>
                <div class="col-sm-8">
                    <input id="qtyName" name="qtyName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">考试时长：</label>
                <div class="col-sm-8">
                    <input id="qtyTime" name="qtyTime" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">课程：</label>
                <div class="col-sm-8">
                    <select id="courseId" name="courseId" class="form-control m-b" required th:with="type=${@Course.selectEduCourseList(null)}">
                        <option value="">所有</option>
                        <option th:each="Course : ${type}" th:text="${Course.getCourseName()}"
                                th:value="${Course.getCourseId()}"></option>
                    </select>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
                </div>
            </div>
        </section>

        <h1>添加单选题</h1>
        <section>
            <div class="form-horizontal m" id="form-paper-qtySing">
                <div class="col-sm-8">
                    <textarea id="qtySing" name="qtySing" class="form-control" required></textarea>
                </div>
            </div>
        </section>

        <h1>添加多选题</h1>
        <section>
            <div class="form-horizontal m" id="form-paper-qtyMuti">
                <div class="col-sm-8">
                    <textarea id="qtyMuti" name="qtyMuti" class="form-control" required></textarea>
                </div>
            </div>
        </section>

        <h1>添加判断题</h1>
        <section>
            <div class="form-horizontal m" id="form-paper-qtyJud">
                <div class="col-sm-8">
                    <textarea id="qtyJud" name="qtyJud" class="form-control" required></textarea>
                </div>
            </div>
        </section>

        <h1>添加填空题</h1>
        <section>
            <div class="form-horizontal m" id="form-paper-qtyFill">
                <div class="col-sm-8">
                    <textarea id="qtyFill" name="qtyFill" class="form-control" required></textarea>
                </div>
            </div>
        </section>

<!--        <h1>添加简答题</h1>-->
<!--        <section>-->
<!--            <div class="col-sm-8">-->
<!--                <textarea name="qtyEss" class="form-control"></textarea>-->
<!--            </div>-->
<!--        </section>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">总分：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input name="score" class="form-control" type="text">-->
<!--            </div>-->
<!--        </div>-->
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-steps-js"/>
<script type="text/javascript">
    var prefix = ctx + "edusystem/paper"
    $("#form-paper-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-paper-add').serialize());
        }
    }

    // Initialize wizard
    var wizard = $("#form-paper-add").steps({
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onStepChanging:function(event, currentIndex, newIndex){/*步骤更改之前进行验证，默认验证结果是true*/
            console.log(newIndex)
            switch (newIndex) {
                case 1:
                    if($("#form-paper-add").validate().element($("#qtyName"))&&$("#form-paper-add").validate().element($("#qtyTime"))&& $("#form-paper-add").validate().element($("#courseId"))) {
                          return true;
                    }
                    return false
                case 2:
                    // 单个校验
                    return $("#form-paper-add").validate().element($("#qtySing"))
                case 3:
                    // 单个校验
                    return $("#form-paper-add").validate().element($("#qtyMuti"))
                case 4:
                    // 单个校验
                    return $("#form-paper-add").validate().element($("#qtyJud"))
                case 5:
                    // 单个校验
                    return $("#form-paper-add").validate().element($("#qtyFill"));
            }
            return true;
        },
        onStepChanged:function(currentIndex, newIndex){/*步骤后变更后  触发的函数   */
            return true;
        },
        onFinishing:function (currentIndex, newIndex) {/*点击 提交 前 触发的事件，默认验证结果是false */
            return true;
        },
        onFinished:function (currentIndex, newIndex) {/*点击 提交 后触发的事件*/
            submitHandler();
        }
    });

    //Add step
    // wizard.steps("add", {
    //     title: "HTML code",
    //     bodyTag: "h1",
    //     content: "<strong>HTML code</strong>"
    // });

    // $(function(){
    //     $("#example-basic").steps({
    //         headerTag: "h3",
    //         bodyTag: "section",
    //         transitionEffect: "slideLeft",
    //         autoFocus: true,
    //         onStepChanging:function(){/*步骤更改之前进行验证，默认验证结果是true*/
    //             // alert('步骤变更前触发');
    //             return true;
    //         },
    //         onStepChanged:function(){/*步骤后变更后  触发的函数   */
    //             return true;
    //             // return false;
    //             // alert('步骤变更后触发');
    //         },
    //         onFinishing:function () {/*点击 提交 前 触发的事件，默认验证结果是false */
    //             return true;
    //             // alert('提交前触发');
    //             // return false;/*验证结果*/
    //         },
    //         onFinished:function () {/*点击 提交 后触发的事件*/
    //             alert('提交');
    //         }
    //     });
    // })

</script>
</body>
</html>